<template>
	<view class="server-box">

		<view class="title">
			请选择可提供的服务，前三个将展示在产品列表中
		</view>
		<view class="name-box">
			<view :class="item.isSelected?'name-wrap-active':'name-wrap'" v-for="(item,index) in arrName" :key="index"
				@click="nameClick(item,index)">
				<text class="name-name">{{item.name}}</text>
				<!-- v-show="item.isDelete" -->
				<view class="name-close" v-if="item.isDelete" @tap.stop="delArr(item,index)">
					<img class="name-close-img"
						:src="item.isSelected?'https://file.casugn.com/storecompcard//PH9ZChQGNvdQ710d5de8e271bc8c7ae92a832eb56978_1661308732548.png':'https://file.casugn.com/storecompcard//LCgnWcCsA4VLbd7676be748d4729449f6ee44c269a41_1661308715687.png'"
						alt="">
				</view>
			</view>
		</view>
		<view class="name-add" @click="addName">
			手动添加
		</view>
		<view class="area-save">
			<u-button type="primary" :disabled="saveDisable" color="#2684ff" text="保存" @click="save">
			</u-button>
		</view>


		<u-modal :show="addShow" title="添加服务标签" showCancelButton="true" @confirm="addConfirm" @cancel="addCancel">
			<view class="slot-content">
				<u--textarea placeholder="点击输入服务标签" v-model="addNameValue" border="none" maxlength="6"
					count="true"></u--textarea>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name: "supplyServer",
		data() {
			return {
				arrName: [{
						isDelete: false,
						name: "免费样品检验",
						isSelected: false,
					},
					{
						isDelete: false,
						name: "48小时发货",
						isSelected: false,
					}, {
						isDelete: false,
						name: "工厂直销",
						isSelected: false,
					}, {
						isDelete: false,
						name: "自有品牌",
						isSelected: false,
					}, {
						isDelete: false,
						name: "交期保障",
						isSelected: false,
					}, {
						isDelete: false,
						name: "15天包换",
						isSelected: false,
					},
				],
				addShow: false,
				addNameValue: "",
				imgUrl: "https://file.casugn.com/storecompcard//LCgnWcCsA4VLbd7676be748d4729449f6ee44c269a41_1661308715687.png",
				nameActive: '-1',
				choose: []
			};
		},
		onShow() {

		},
		methods: {
			addName() {
				this.addShow = true
				this.addNameValue = ''
			},
			//删除添加子集
			delArr(item, index) {
				let indexes = this.choose.indexOf(item.name);
				this.choose.splice(indexes, 1);
				this.arrName.splice(index, 1)
			},
			nameClick(item, index) {
				// this.nameActive=index
				let that = this;
				that.arrName[index].isSelected = !that.arrName[index].isSelected;
				if (that.arrName[index].isSelected == true) {
					that.choose.push(that.arrName[index].name);
					console.log(that.choose)
				} else {
					let indexes = that.choose.indexOf(item.name);
					that.choose.splice(indexes, 1);
				}
			},
			proNumBlur(val) {
				console.log(val)
			},
			addConfirm() {
				if (this.addNameValue == '') {
					uni.showToast({
						title: "请输入服务标签",
						icon: 'none'
					});
					return false
				} else {
					this.addShow = false
					let data = {
						isDelete: true,
						name: this.addNameValue,
						isSelected: false,
					}
					this.arrName.push(data)
				}
			},
			addCancel() {
				this.addShow = false
				this.addNameValue = ''
			},
			save() {
				this.$emit("serverSelectName", this.choose)
				// console.log(a.isSelect)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.server-box {
		position: relative;
		height: 100%;
		// padding-bottom: 150upx;
		background: white;

		.area-save {
			position: fixed;
			bottom: 0;
			text-align: center;
			width: 100%;
			height: 120upx;
			margin-top: 10upx;
			background: white;
			border-top: 1px solid #f4f4f4;
			padding: 0 48rpx;
			bottom: 0;
			box-sizing: border-box;

		}

		.title {
			background: #fff4e7;
			color: #ff8802;
			line-height: 80upx;
			text-align: center;
			font-size: 28upx;
		}

		.name-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 32rpx;

		}

		.name-add {
			margin: 0 32rpx;
		}

		.name-wrap,
		.name-wrap-active,
		.name-add {
			position: relative;
			width: 184rpx;
			box-sizing: content-box;
			background: #f5f5f5;
			font-size: 26upx;
			border-radius: 5upx;
			text-align: center;
			padding: 16rpx 15rpx;
			margin-top: 24upx;

			.name-close {
				width: 32upx;
				height: 32upx;
				position: absolute;
				top: -11rpx;
				right: -16rpx;
				background-color: #fff;
				border-radius: 50%;
				padding: 4rpx;
				border: 1px solid #ddd;

				.name-close-img {
					width: 100%;
					height: 100%;
					z-index: 10;
				}
			}
		}

		.name-wrap-active {
			background: #f0f6fc;
			color: #2684ff;
		}

		.slot-content {
			width: 100%;
			height: 50upx;
			padding-bottom: 20rpx;

			::v-deep .u-textarea {
				margin-top: 25upx;
				display: flex;
				justify-content: space-between;
				padding: 0;
				font-size: 30upx;
			}

			::v-deep .u-textarea__count {
				position: relative;
				// top: -50upx;
			}

		}


	}
</style>
